<template>
	<div class="bill-paid">
	  <div class="loading" v-if="status === 'loading'">
	  	<v-loading></v-loading>
	  </div>
		<div class="bill-paid-container" v-if="status === 'complete'">
      <div class="item" v-for="(item, index) in data" :key="index" :class="{ 'bill-no-bottom': index === data.length - 1 }">
			  <personal-bill-item :item="item" type="hasPaid"></personal-bill-item>
      </div>
      <div class="page">
        <v-pager :activeIndex="nowPage" :page-num="pageNum" :total="total" @change-page="changePage"></v-pager>
      </div>
		</div>
		<div class="bill-paid-null" v-if="status === 'null'">
			<div class="bill-paid-null-illustration"></div>
			<div class="bill-paid-null-text">
				{{ $t('message.noBill') }}
			</div>
		</div>
	</div>
</template>

<script>
import VLoading from '@/components/base/VLoading'
import PersonalBillItem from '@/components/personal/bill/PersonalBillItem'
import VPager from '@/components/base/VPager'

export default {
  name: 'PersonalBillHasPaid',
  components: {
    VLoading,
    PersonalBillItem,
    VPager
  },
  props: {
    keyword: {
      type: String
    }
  },
  data () {
    return {
      nowPage: 1,
      total: 0,
      pageNum: 0,
      data: [],
      status: 'loading'
    }
  },
  computed: {
    searchValue () {
      return this.keyword
    }
  },
  watch: {
    nowPage () {
      this.hasBillList()
    },
    searchValue () {
      this.hasBillList()
    }
  },
  methods: {
    // 已还账单
    hasBillList () {
      this.status = 'loading'
      this.$ajax.hasBillList({
        page: this.nowPage,
        number: 5,
        keyword: this.searchValue
      }).then((res) => {
        if (res.code === 200) {
          this.pageNum = res.data.page_count
          this.total = res.data.count
          this.data = res.data.content
          this.status = 'complete'
        } else if (res.code === 202) {
          this.data = []
          this.status = 'null'
        } else if (res.code === 301) {
          this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
        }
      })
    },
    changePage (val) {
      this.nowPage = val
    }
  },
  created () {
    this.hasBillList()
  }
}
</script>

<style scoped>
.loading {
  margin-top: 100px;
}

.item {
  border-bottom: 1px solid #e6e6e6;
}

.bill-no-bottom {
  border-bottom: 0;
}

.page {
  margin-top: 16px;
}

.bill-paid-null {
	padding: 60px 0 121px;
}

.bill-paid-null-illustration {
	width: 220px;
	height: 146px;
	margin: 0 auto;
	background: url(../../../assets/images/personal/illustration_bill.png) no-repeat center;
}

.bill-paid-null-text {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #666;
	margin-top: 10px;
	text-align: center;
}
</style>
